<template>
  <a-drawer
      :title="title"
      placement="right"
      :closable="true"
      :width="width"
      :visible="visible"
      @close="handleCancel"
      destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="驳回原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rejectCause">
                <a-input v-model="model.rejectCause" placeholder="请输入驳回原因"></a-input>
              </a-form-model-item>
              <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rejectImage">
                <div>
                  <a-upload
                          :beforeUpload="doBeforeUpload"
                          :action="uploadAction"
                          list-type="picture-card"
                          :file-list="fileList"
                          :headers="headers"
                          :data="{'biz':'temp'}"
                          :returnUrl="returnUrl"
                          @preview="handlePreview"
                          @change="handleChange"
                  >
                    <div v-if="fileList.length < 8">
                      <a-icon type="plus"/>
                      <div class="ant-upload-text">
                        上传
                      </div>
                    </div>
                  </a-upload>
                  <a-modal :visible="previewVisible" :footer="null" @cancel="handleClose">
                    <img alt="example" style="width: 100%" :src="previewImage"/>
                  </a-modal>
                </div>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-button type="primary" style="width: 100%" @click="handleOk">保存</a-button>
  </a-drawer>
  <!--<a-modal
    centered
    :title="title"
    :width="1000"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">


  </a-modal>-->
</template>

<script>

  import {postAction} from '@/api/manage'
  import Vue from "vue";
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  export default {
    name: "rejectLabourModal",
    data() {
      return {
        model: {},
        uploadAction: window._CONFIG['domianURL'] + "/sys/oss/file/upload",
        fileList: [],
        headers: {},
        previewImage: '',
        returnUrl: {
          type: Boolean,
          required: false,
          default: true
        },
        width: '100%',
        previewVisible: false,
        uploadGoOn:true,
        title: '',
        currentId: 0,
        labourId: 0,
        visible: false,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          rejectCause: [{ required: true, message: '驳回原因不能为空' }],
        },
        url: {
          edit: "/ghCustomerLabourDistributeReject/add",
        }
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token": token}
    },
    methods: {
      handleOk() {
        const that = this;
        this.model.labourId = this.labourId;
        let rejectImage = "";
        for (let i = 0; i < this.fileList.length; i++) {
          rejectImage += this.fileList[i].url + ",";
        }
        this.model.rejectImage = rejectImage;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            postAction(this.url.edit, this.model).then((res) => {
              if (res.success) {
                that.$message.success("编辑成功");
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.visible = false;
              this.model = {}
            })
          }
        })
      },
      async handlePreview(file) {
        if (!file.response.result && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.response.result || file.preview;
        this.previewVisible = true;
      },

      doBeforeUpload(file){
        var fileType = file.type;
        if (fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          this.uploadGoOn=false
          return false;
        }
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过 10MB!')
          this.uploadGoOn=false
          return false;
        }
        return true;
      },

      handleChange(info) {
        console.log("--文件列表改变--")
        if (!info.file.status && this.uploadGoOn === false) {
          info.fileList.pop();
        }
        let fileList = info.fileList
        if (info.file.status === 'done') {
          if (this.number > 0) {
            fileList = fileList.slice(-this.number);
          }
          if (info.file.response.success) {
            fileList = fileList.map((file) => {
              if (file.response) {
                // let reUrl = file.response.message;
                // file.url = getFileAccessHttpUrl(reUrl);
                file.url = file.response.result;
              }
              return file;
            });
          }
          //this.$message.success(`${info.file.name} 上传成功!`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        } else if (info.file.status === 'removed') {
          this.handleDelete(info.file)
        }
        this.fileList = fileList
        if (info.file.status === 'done' || info.file.status === 'removed') {
          //returnUrl为true时仅返回文件路径
          if (this.returnUrl) {
            this.handlePathChange()
          } else {
            //returnUrl为false时返回文件名称、文件路径及文件大小
            this.newFileList = [];
            for (var a = 0; a < fileList.length; a++) {
              // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
              if (fileList[a].status === 'done') {
                var fileJson = {
                  fileName: fileList[a].name,
                  filePath: fileList[a].response.message,
                  fileSize: fileList[a].size
                };
                this.newFileList.push(fileJson);
              } else {
                return;
              }
              // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
            }
            this.$emit('change', this.newFileList);
          }
        }
      },
      handlePathChange() {
        let uploadFiles = this.fileList
        let path = ''
        if (!uploadFiles || uploadFiles.length == 0) {
          path = ''
        }
        let arr = [];
        if (!this.isMultiple && uploadFiles.length > 0) {
          arr.push(uploadFiles[uploadFiles.length - 1].response.message)
        } else {
          for (let a = 0; a < uploadFiles.length; a++) {
            // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
            if (uploadFiles[a].status === 'done') {
              arr.push(uploadFiles[a].response.message)
            } else {
              return;
            }
            // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
          }
        }
        if (arr.length > 0) {
          path = arr.join(",")
        }
        this.$emit('change', path);
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.visible = false;
        this.model = {};
        this.fileList = [];
      },
      //删除图片
      handleDelete(file){
        console.log("=========="+file)
      }
    },
  }
</script>

<style scoped>

</style>